<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big{
            margin: auto;
            position: relative;
            width: 300px;
            display: flex;
            height: 100%;
        }
        
        .big .left{
            position: absolute;
            right: -40px;
            box-sizing: border-box;
            width: 200px;
            height: 100%;
            border: 1px solid red;
            /* display: flex; */
           margin-left: 10px;
           min-height: max-content;
        }
        .big  .select .smaill::after{
            content: '^';
        }
        .big .select {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .big  .select .samill{
            position: relative;
            margin-bottom: 5px;
            outline: none;
            width: 120px;
            border: 1px solid rgb(118, 118, 118);
        }
        .big .select .samill:last-child{
            margin-bottom: 0;
        }
        .big  .select .samill span{
            margin-left: 5px;
        }
        .big  .select .samill::after{
            content: "^";
            display: block;
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
        }
        .big  .select .samill:hover{
            border: 1px solid red;
            color: red;
        }
        .big  .select .samill:hover::after{
            
            transition: all 0.3s;
            transform:translateY(-50%) rotateX(180deg);
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="select">
            <div class="samill"> 
                
            </div>
            <div class="samill"> 
               
            </div>
            <div class="samill"> 
                
            </div>
            <div class="samill"> 
                
            </div>
        </div>
        <div class="left"></div>
    </div>
    <script>
        let select  = document.querySelector('.select');
        let selects = document.querySelectorAll('.select')
        let div = document.querySelector('.left')
        let objec = {}
        let xml = new XMLHttpRequest()
        xml.open('get','http://127.0.0.1:9700/serve')
        xml.responseType = 'json'
        xml.send();
        xml.onreadystatechange  = ()=>{
        if (xml.readyState==4) {
            if (xml.status==200) {
                objec = xml.response
                var i = 0
                    for (const iterator of objec) {
                        select.children[i].innerHTML = `<span>${iterator.name}</span>`
                        i++
                    }
            }
          }
        }
        
        select.addEventListener('mouseover',(event)=>{
            if (event.target.getAttribute('class') == 'samill') {
                objec.forEach(element => {
                    if (element.name == event.target.children[0].innerHTML) {
                        div.innerHTML = `${element.value.age}<br>${element.value.sex}`
                    }
                });
            }
        })
    </script>
</body>
</html>